<template>
    <view>
        <view class="text-orange text-sm text-center margin-tb-sm">作为门店负责人，需要对你的身份进行认证</view>

        <view class="moudle bg-white radius margin-lr-sm padding-lr-lg box-sizing">
            <view class="padding-tb flexs align-center justify-between text-sm" style="border-bottom: 1px solid #e8e8e8">
                <view>真实姓名</view>
                <input :disabled="bool" class="text-right" placeholder="请输入真实姓名" :value="name" @input="getname" />
            </view>
            <view class="padding-tb flexs align-center justify-between text-sm" style="border-bottom: 1px solid #e8e8e8">
                <view>证件号码（身份证）</view>
                <input :disabled="bool" class="text-right" type="idcard" placeholder="请输入证件号码" :value="idcode" @input="getidcode" maxlength="18" />
            </view>
            <!-- <view class="padding-tb flexs align-center justify-between text-sm">
    <view>营业执照书编号 </view>
    <input disabled="{{bool}}" class="text-right" placeholder="请输入证件编号" value="{{num}}" bindinput="getnum"></input>
  </view> -->
        </view>

        <view class="moudle margin-top-sm flexs align-center justify-between padding-sm bg-white radius margin-lr-sm box-sizing">
            <view @tap="getdescribe" data-index="1">
                <view class="flexs align-center">
                    <view class="text-sm text-bold">上传营业执照</view>
                    <view class="text-orange text-xs margin-left-xs radiues flexs align-center justify-center" style="border: 1px solid #ff8722; width: 20rpx; height: 20rpx">
                        ?
                    </view>
                </view>
                <view class="text-sm text-darkGrey padding-top-xs">上传您的营业执照</view>
            </view>
            <view @tap="parseEventDynamicCode($event, bool ? '' : 'afterRead')" data-index="1">
                <image class="uploadimg" :src="upload1[0] ? upload1[0] : 'https://kjyiyue.oss-cn-shenzhen.aliyuncs.com/shopimages/photograph.png'"></image>
            </view>
        </view>

        <view class="moudle margin-top-sm flexs align-center justify-between padding-sm bg-white radius margin-lr-sm box-sizing">
            <view @tap="getdescribe" data-index="2">
                <view class="flexs align-center">
                    <view class="text-sm text-bold">上传门店封面</view>
                    <view class="text-orange text-xs margin-left-xs radiues flexs align-center justify-center" style="border: 1px solid #ff8722; width: 20rpx; height: 20rpx">
                        ?
                    </view>
                </view>
                <view class="text-sm text-darkGrey padding-top-xs">上传您的门店封面</view>
            </view>
            <view @tap="parseEventDynamicCode($event, bool ? '' : 'afterRead')" data-index="2">
                <image class="uploadimg" mode="aspectFit" :src="upload2[0] ? upload2[0] : 'https://kjyiyue.oss-cn-shenzhen.aliyuncs.com/shopimages/photograph.png'"></image>
            </view>
        </view>

        <view class="moudle margin-top-sm flexs align-center justify-between padding-sm bg-white radius margin-lr-sm box-sizing">
            <view @tap="getdescribe" data-index="3">
                <view class="flexs align-center">
                    <view class="text-sm text-bold">上传门店照片</view>
                    <view class="text-orange text-xs margin-left-xs radiues flexs align-center justify-center" style="border: 1px solid #ff8722; width: 20rpx; height: 20rpx">
                        ?
                    </view>
                </view>
                <view class="text-sm text-darkGrey padding-top-xs">上传门店环境照，限量8张</view>
            </view>
            <view @tap="parseEventDynamicCode($event, bool ? '' : 'gouploadimg')" data-index="3">
                <image class="uploadimg" :src="upload3[0] ? upload3[0] : 'https://kjyiyue.oss-cn-shenzhen.aliyuncs.com/shopimages/photograph.png'"></image>
            </view>
        </view>

        <view class="moudle margin-top-sm flexs align-center justify-between padding-sm bg-white radius margin-lr-sm box-sizing">
            <view @tap="getdescribe" data-index="4">
                <view class="flexs align-center">
                    <view class="text-sm text-bold">上传手持身份证照</view>
                    <view class="text-orange text-xs margin-left-xs radiues flexs align-center justify-center" style="border: 1px solid #ff8722; width: 20rpx; height: 20rpx">
                        ?
                    </view>
                </view>
                <view class="text-sm text-darkGrey padding-top-xs">上传您本人手持身份证照</view>
            </view>
            <view @tap="parseEventDynamicCode($event, bool ? '' : 'afterRead')" data-index="4">
                <image class="uploadimg" :src="upload4[0] ? upload4[0] : 'https://kjyiyue.oss-cn-shenzhen.aliyuncs.com/shopimages/photograph.png'"></image>
            </view>
        </view>

        <view style="height: 220rpx"></view>
        <view class="bar_bottom bg-white padding-top-sm padding-lr-lg box-sizing">
            <view class="flexs align-center">
                <view :class="'changbox margin-right-xs flexs align-center justify-center ' + (agree ? 'in' : '')" @tap="parseEventDynamicCode($event, bool ? '' : 'getagree')">
                    <view class="changboxs" v-if="agree"></view>
                </view>
                <view class="text-sm text-darkGrey" @tap="goxieyi">我已阅读并同意《意约门店服务协议》</view>
            </view>
            <view class="bar_btn radiues text-center bg-orange margin-top-sm text-lg text-bold" @tap="onNext" v-if="status == 3">提交审核</view>
            <view class="bar_btn radiues text-center bg-orange margin-top-sm text-lg text-bold" @tap="onNext" v-if="status == -1">审核失败，重新审核</view>
            <view class="bar_btn radiues text-center bg-orange margin-top-sm text-lg text-bold" v-if="status == 0">审核中</view>
            <view class="bar_btn radiues text-center bg-orange margin-top-sm text-lg text-bold" v-if="status == 1">已实名</view>
        </view>
        <van-popup :show="showhelp" round position="bottom" @close="onClose" close-icon="cross" closeable>
            <view class="margin-top-help margin-lr-lg text-bold">上传营业执照 示例</view>
            <view class="margin-top-helps margin-lr-lg flexs align-center justify-between margin-bottom-xl">
                <view class="left">
                    <view class="text-dm">{{ text }}</view>
                </view>
                <view class="right margin-right-xs">
                    <image class="image" :src="helpImage"></image>
                </view>
            </view>
            <view class="btns bar_btn radiues text-center bg-orange margin-top-sm text-lg" @tap="onHelp">我已了解</view>
        </van-popup>
    </view>
</template>

<script>
const app = getApp();

const _request = require('../../utils/request.js');

require;
export default {
    data() {
        return {
            name: '',
            idcode: '',

            // num: '',
            agree: true,

            showhelp: false,
            text: '',
            helpImage: '',
            upload1: [],
            upload2: [],
            upload3: [],
            upload4: [],
            status: 3,
            bool: false,
            num: ''
        };
    },
    onLoad: function () {
        this.getStore(); //回显
    },
    methods: {
        getStore() {
            _request
                .get('/storeAuthApply/getStoreAuthApplyByStoreId', {
                    storeId: uni.getStorageSync('storeId')
                })
                .then((res) => {
                    if (res.data.code == 200) {
                        this.setData({
                            status: res.data.data.status || 3,
                            name: res.data.data.realname,
                            idcode: res.data.data.cardno,
                            // num: res.data.data.licenseno,
                            upload1: res.data.data.businesslicensePath ? [res.data.data.businesslicensePath] : [],
                            upload2: res.data.data.storeBackgroundPath ? [res.data.data.storeBackgroundPath] : [],
                            upload3: res.data.data.storephotosPaths ? res.data.data.storephotosPaths : [],
                            upload4: res.data.data.handIDcardPath ? [res.data.data.handIDcardPath] : []
                        });

                        if (res.data.data.status == 0 || res.data.data.status == 1) {
                            this.setData({
                                bool: true
                            });
                        } else {
                            this.setData({
                                bool: false
                            });
                        }
                    }
                });
        },

        getname(e) {
            this.setData({
                name: e.detail.value.replace(/\s+/g, '')
            });
        },

        getidcode(e) {
            this.setData({
                idcode: e.detail.value.replace(/\s+/g, '')
            });
        },

        getnum(e) {
            this.setData({
                num: e.detail.value.replace(/\s+/g, '')
            });
        },

        goxieyi() {
            uni.navigateTo({
                url: '../../pages/auth/base/xieyi'
            });
        },

        gouploadimg() {
            uni.navigateTo({
                url: '../auth/upload_img?img=' + JSON.stringify(this.upload3)
            });
        },

        getagree() {
            this.setData({
                agree: !this.agree
            });
        },

        getdescribe(e) {
            let that = this;
            var index = e.currentTarget.dataset.index;

            if (index == 1) {
                that.setData({
                    showhelp: true
                });
                that.setData({
                    text: '需要上传营业执照照片，拍摄区域能清晰可见所有人信息及执照编号。建议您参考示例，完成上传。图片符合要求才能更快完成审核！',
                    helpImage: 'https://kjyiyue.oss-cn-shenzhen.aliyuncs.com/shopimages/business.png'
                });
            }

            if (index == 2) {
                that.setData({
                    showhelp: true
                });
                that.setData({
                    text: '需要上传门店封面照片，需包含完整牌匾，照片门头、门脸清晰可见。建议您参考示例，完成上传。图片符合要求才能更快完成审核！',
                    helpImage: 'https://kjyiyue.oss-cn-shenzhen.aliyuncs.com/shopimages/cover.png'
                });
            }

            if (index == 3) {
                that.setData({
                    showhelp: true
                });
                that.setData({
                    text: '需上传门店环境照可以真实反映店内情况，至少1张最多8张。建议您每张照片参考示例，完成上传！图片符合要求才能更快完成审核。',
                    helpImage: 'https://kjyiyue.oss-cn-shenzhen.aliyuncs.com/shopimages/environment.png'
                });
            }

            if (index == 4) {
                that.setData({
                    showhelp: true
                });
                that.setData({
                    text: '需要上传法人手持身份证照片，需包含人体上半身及身份证件，人脸、身份证件清晰可见。建议您参考示例，完成上传。图片符合要求才能更快完成审核！',
                    helpImage: 'https://kjyiyue.oss-cn-shenzhen.aliyuncs.com/shopimages/people.png'
                });
            }
        },

        //关闭弹框
        onHelp() {
            this.setData({
                showhelp: false
            });
        },

        onClose() {
            this.setData({
                showhelp: false
            });
        },

        // 上传
        afterRead(e) {
            if (e.currentTarget.dataset.index == 2) {
                uni.navigateTo({
                    url: '/pages/setcover/index'
                });
                return;
            }

            let that = this;
            uni.chooseImage({
                count: 1,
                sourceType: ['album', 'camera'],

                success(res) {
                    if (e.currentTarget.dataset.index == 1) {
                        that.setData({
                            upload1: res.tempFilePaths
                        });
                    }

                    if (e.currentTarget.dataset.index == 2) {
                        that.setData({
                            upload2: res.tempFilePaths
                        });
                    }

                    if (e.currentTarget.dataset.index == 3) {
                        that.setData({
                            upload3: res.tempFilePaths
                        });
                    }

                    if (e.currentTarget.dataset.index == 4) {
                        that.setData({
                            upload4: res.tempFilePaths
                        });
                    }

                    var tempFilePaths = res.tempFilePaths[0];
                    var self = that;
                    uni.uploadFile({
                        url: app.globalData.baseurl + '/store-api/file/batchUpload',
                        filePath: tempFilePaths,
                        name: 'files',
                        header: {
                            token: uni.getStorageSync('token')
                        },
                        formData: {
                            files: 'file'
                        },

                        success(res) {
                            var data = JSON.parse(res.data);

                            if (data.code == 200) {
                                if (e.currentTarget.dataset.index == 1) {
                                    self.setData({
                                        upload1: data.data
                                    });
                                }

                                if (e.currentTarget.dataset.index == 2) {
                                    self.setData({
                                        upload2: data.data
                                    });
                                }

                                if (e.currentTarget.dataset.index == 3) {
                                    self.setData({
                                        upload3: data.data
                                    });
                                }

                                if (e.currentTarget.dataset.index == 4) {
                                    self.setData({
                                        upload4: data.data
                                    });
                                }
                            } else {
                                uni.showToast({
                                    title: '上传失败',
                                    icon: 'none'
                                });

                                if (e.currentTarget.dataset.index == 1) {
                                    self.setData({
                                        upload1: ''
                                    });
                                }

                                if (e.currentTarget.dataset.index == 2) {
                                    self.setData({
                                        upload2: ''
                                    });
                                }

                                if (e.currentTarget.dataset.index == 3) {
                                    self.setData({
                                        upload3: ''
                                    });
                                }

                                if (e.currentTarget.dataset.index == 4) {
                                    self.setData({
                                        upload4: ''
                                    });
                                }
                            }
                        },

                        fail(error) {
                            uni.showToast({
                                title: '上传失败',
                                icon: 'none'
                            });
                        }
                    });
                }
            });
        },

        // 提交
        onNext() {
            if (!this.name) {
                uni.showToast({
                    title: '请输入真实姓名',
                    icon: 'none'
                });
                return;
            }

            if (!this.idcode) {
                uni.showToast({
                    title: '请输入证件号码',
                    icon: 'none'
                });
                return;
            }

            if (this.idcode.length < 18) {
                uni.showToast({
                    title: '请输入正确的证件号码',
                    icon: 'none'
                });
                return;
            } // if (!this.data.num) {
            //   wx.showToast({
            //     title: "请输入证件编号",
            //     icon: 'none'
            //   })
            //   return;
            // }

            if (this.upload1.length <= 0) {
                uni.showToast({
                    title: '请上传营业执照',
                    icon: 'none'
                });
                return;
            }

            if (this.upload2.length <= 0) {
                uni.showToast({
                    title: '请上传门店封面',
                    icon: 'none'
                });
                return;
            }

            if (this.upload3.length <= 0) {
                uni.showToast({
                    title: '请上传门店照片',
                    icon: 'none'
                });
                return;
            }

            if (this.upload4.length <= 0) {
                uni.showToast({
                    title: '请上传手持身份证照',
                    icon: 'none'
                });
                return;
            }

            if (!this.agree) {
                uni.showToast({
                    title: '请阅读并同意协议',
                    icon: 'none'
                });
                return;
            }

            _request
                .postObj('/storeAuthApply/save', {
                    realname: this.name,
                    cardno: this.idcode,
                    // licenseno: this.data.num,
                    licenseno: 123456,
                    businesslicensePath: this.upload1[0],
                    bannerPath: this.upload2[0],
                    storephotosPaths: this.upload3,
                    handIDcardPath: this.upload4[0],
                    storeId: uni.getStorageSync('storeId')
                })
                .then((res) => {
                    if (res.data.message == '请填写正确的身份证号码') {
                        uni.showToast({
                            title: '请输入正确的证件号码',
                            icon: 'none'
                        });
                        return;
                    }

                    if (res.data.code == 200) {
                        uni.showToast({
                            title: '上传成功',
                            icon: 'none'
                        });
                        setTimeout(() => {
                            uni.switchTab({
                                url: '/firstpages/home/index'
                            });
                        }, 2000);
                    }
                });
        }
    }
};
</script>
<style>
/* pages/myset/realname/index.wxss */
page {
    background: #f5f5f5;
}
.moudle {
    width: 710rpx;
    box-shadow: 2px 2px 8px 2px rgba(241, 241, 241, 0.4);
}
.uploadimg {
    width: 248rpx;
    height: 152rpx;
}
.bar_bottom {
    width: 750rpx;
    height: 180rpx;
    position: fixed;
    bottom: 0;
    left: 0;
    /* z-index: 9999; */
}
.changbox {
    width: 20rpx;
    height: 20rpx;
    border: 1px solid #999999;
    border-radius: 50%;
}
.in {
    border: 1px solid #ff8722;
}
.changboxs {
    width: 14rpx;
    height: 14rpx;
    background: #ff8722;
    border-radius: 50%;
}
.bar_btn {
    width: 670rpx;
    line-height: 90rpx;
}
.margin-top-help {
    margin-top: 80rpx;
    margin-bottom: 50rpx;
}
.margin-top-helps .left {
    color: #999999;
    line-height: 45rpx;
}
.margin-top-helps .right {
    padding: 10rpx;
}
.right .image {
    width: 320rpx;
    height: 210rpx;
}
.btns {
    margin: 0 auto;
    margin-bottom: 40rpx;
}
</style>
